<template> 
  <div class="bronze-restoration">
    <!-- 头部 -->
    <div class="header-container">
      <div class="header">
        <button @click="goBack" class="back-button">
          <i class="fas fa-arrow-left"></i> 返回
        </button>
        <h1>青铜模型展示</h1>
      </div>
    </div>

    <!-- 搜索和筛选栏 -->
    <div class="search-filter-container">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="搜索模型..."
        class="search-input"
      />
      <div class="filter-container">
        <button @click.stop="toggleCategories" class="filter-button">
          请选择类别
        </button>
        <transition name="fade">
          <div v-if="showCategories" class="category-list">
            <button
              v-for="category in categories"
              :key="category"
              @click.stop="filterByCategory(category)"
              :class="['category-item', { active: currentCategory === category || (category === '展示全部' && currentCategory === '') }]"
            >
              {{ category }}
            </button>
          </div>
        </transition>
      </div>
    </div>

    <!-- 模型网格 -->
    <div class="model-grid">
      <div
        v-for="(model, index) in displayNewItems"
        :key="model.id"
        class="model-item"
      >
        <div class="model-box">
          <div class="model-thumbnail" @click="showModel(index)">
            <img :src="model.thumbnail" :alt="model.name" />
            <!-- 收藏按钮 -->
            <button
              class="favorite-button"
              :class="{ favorited: isFavorited(model.id), disabled: !userIsLoggedIn }"
              @click.stop="toggleFavorite(model.id)"
              :disabled="isProcessingFavorites || !userIsLoggedIn"
              :title="userIsLoggedIn ? (isFavorited(model.id) ? '取消收藏' : '收藏') : '请登录后收藏'"
            >
              <i :class="isFavorited(model.id) ? 'fas fa-heart' : 'far fa-heart'"></i>
            </button>
          </div>
          <p @click="showModel(index)">{{ model.name }}</p>
        </div>
      </div>
    </div>

    <!-- 加载更多按钮 -->
    <button v-if="hasMoreItems" @click="loadMore" class="load-more-btn">
      加载更多
    </button>

    <!-- 模型查看器 -->
    <div v-if="showModelViewer" class="model-viewer-overlay">
      <div class="model-viewer">
        <div class="model-viewer-header">
          <h2>{{ currentModel.name }}</h2>
          <button @click="closeModelViewer" class="close-button">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div id="model-container"></div>
        <div v-if="loading" class="loading-bar">
          <div class="progress" :style="{ width: loadingProgress + '%' }"></div>
        </div>
        <div class="model-description">
          <p>{{ currentModel.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import axios from 'axios';
import { BASE_URL } from '@/config.js';

export default {
  name: 'BronzeRestoration',
  data() {
    return {
      models: [
      {
          id: 'model1',
          name: '方尊',
          class: '尊', // 添加类别
          thumbnail: 'thumbnails/bronze_01.png',
          modelPath: '3Dmodels/gui_food_vessel_11th_century_bce/scene.gltf',
          description: '方尊是一种用于祭祀的青铜容器，通常用来盛酒。方尊的形制有着方形的基座和较为厚重的装饰，例如饕餮纹、云雷纹等。这件器物的双耳装饰造型很可能是动物形象，常见的有龙、凤等神兽，作为装饰体现了权威和神秘的象征。',
          cameraPosition: { x: 0, y: 5, z: 10 },
          modelScale: { x: 20, y: 20, z: 20 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.003,
        },
        {
          id: 'model2',
          name: '卣',
          class: '卣', // 添加类别
          thumbnail: 'thumbnails/bronze_02.png',
          modelPath: '3Dmodels/you_wine_vessel_12th-11th_century_bce/scene.gltf',
          description: '青铜卣是一种盛酒的容器，常用于祭祀或宴会。这种器物的特点包括圆腹、盖顶、提梁，以及较为精致的装饰图案，例如饕餮纹、夔龙纹等。卣的形状一般比较饱满，常见于商代晚期和西周时期。',
          cameraPosition: { x: 25, y: 15, z: 10 },
          modelScale: { x: 7, y: 7, z: 7 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.003,
        },
        { 
          id: 'model3',
          name: '爵', 
          class: '爵', // 添加类别
          thumbnail: '/thumbnails/bronze_03.png', 
          modelPath: '/3Dmodels/jia_wine_vessel_13th-12th_century_bce/scene.gltf',
          description: '爵在中国商代和西周时期的礼器中非常常见，主要用于酒礼。它通常用于将酒加热或盛酒，配合贵族的祭祀和宴饮活动。爵的形态设计很讲究功能性，足部可以在火上加热，而流口可以方便倒酒。顶部的立柱既是装饰，也起到防烫的作用。',
          cameraPosition: { x: 0, y: 5, z: 10 },
          modelScale: { x: 25, y: 25, z: 25 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.003
        },
        { 
          id: 'model4',
          name: '方鼎', 
          class: '鼎', // 添加类别
          thumbnail: '/thumbnails/bronze_04.png', 
          modelPath: '3Dmodels/high-res_11th_c_bce_fangding_food_vessel (1)/scene.gltf',
          description: '鼎是一种非常重要的礼器，通常用于烹煮或盛放食物，象征着权力和地位。方鼎与圆鼎不同，其腹部为方形，四条柱状的足部使它更显庄重和稳定。',
          cameraPosition: { x: 0, y: 5, z: 10 },
          modelScale: { x: 40, y: 40, z: 40 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model5',
          name: '瓿', 
          class: '瓿', // 添加类别
          thumbnail: '/thumbnails/bronze_05.png', 
          modelPath: '/3Dmodels/hu_wine_vessel_4th_century_bce/scene.gltf',
          description: '在青铜器分类中，瓿属于盛器类，既可用于礼仪场合，也常见于日常生活中。根据其形态和装饰风格，它可能属于商代或西周时期。与其他精美的礼器相比，瓿的装饰通常较为简朴，但在实用性上十分突出。',
          cameraPosition: { x: 0, y: 10, z: 10 },
          modelScale: { x: 25, y: 25, z: 25 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model6',
          name: '尊', 
          class: '尊', // 添加类别
          thumbnail: '/thumbnails/bronze_06.png', 
          modelPath: '/3Dmodels/zhi_wine_vessel_base_13th-12th_c_bce/scene.gltf',
          description: '尊是一种重要的礼器，常用于盛酒，广泛应用于祭祀典礼中。它的形状通常是宽口、鼓腹、圈足，并带有精美的纹饰，例如饕餮纹、夔龙纹等。这类器物在商代和西周的贵族墓葬和宗庙祭祀中尤为常见。',
          cameraPosition: { x: 0, y: 5, z: 10 },
          modelScale: { x: 1.5, y: 1.5, z: 1.5 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model7',
          name: '礼器', 
          class: '礼器', // 添加类别
          thumbnail: '/thumbnails/bronze_07.png', 
          modelPath: '/3Dmodels/pole_finial_12th-11th_century_bce/scene.gltf',
          description: '这件青铜器的形状和造型带有典型的饕餮纹特征。它可能是青铜器上的一个装饰部件，通常被称为兽面纹饰，在青铜器上广泛应用。饕餮纹是一种古代神秘的怪兽面具纹样，通常代表威严与神秘，象征着古代社会中的宗教和权力。',
          cameraPosition: { x: 0, y: 0, z: -10 },
          modelScale: { x: 25, y: 25, z: 25 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model8',
          name: '鼎', 
          class: '鼎', // 添加类别
          thumbnail: '/thumbnails/bronze_08.png', 
          modelPath: '/3Dmodels/yan_steamer_11th_century_bce/scene.gltf',
          description: '具体来说是一种三足鼎.鼎是古代中国青铜器中非常重要的礼器，通常用于烹饪和盛放食物。它的三个足部设计确保了鼎在火上加热时的稳定性，而两侧的耳环设计便于搬运和移动。',
          cameraPosition: { x: 0, y: 5, z: -10 },
          modelScale: { x: 22, y: 22, z: 22 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model9',
          name: '盉', 
          class: '盉', // 添加类别
          thumbnail: '/thumbnails/bronze_09.png', 
          modelPath: '/3Dmodels/he_wine_vessel_10th-11th_c_bce/scene.gltf',
          description: '盉的特点是具有长流口、提梁和三足设计，常见于商代和西周时期的礼器。它的形态像一个带有盖子的壶，通常用于斟酒或水，配合其他酒器使用。',
          cameraPosition: { x: 0, y: 5, z: -10 },
          modelScale: { x: 25, y: 25, z: 25 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model10',
          name: '方尊', 
          class: '尊', // 添加类别
          thumbnail: '/thumbnails/bronze_12.png', 
          modelPath: '/3Dmodels/zun_wine_vessel_10th_c_bce/scene.gltf',
          description: '斝是一种带有高柄的酒器，通常有两个环耳，主要用于盛酒或在祭祀时温酒。它的特点是高柄、圆腹和两个环状耳，可以用于提拿或悬挂。',
          cameraPosition: { x: 0, y: 10, z: -20 },
          modelScale: { x: 60, y: 60, z: 60 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model11',
          name: '编鐘', 
          class: '鐘', // 添加类别
          thumbnail: '/thumbnails/bronze_10.png', 
          modelPath: '/3Dmodels/yong_bell_late_6th-5th_century_bce/scene.gltf',
          description: '编鐘是一种古代青铜乐器，具有复杂的结构和精美的装饰，常用于宗教和宫廷仪式中。它的设计体现了当时高超的铸造工艺和艺术审美。',
          cameraPosition: { x: 0, y: 5, z: -20 },
          modelScale: { x: 40, y: 40, z: 40 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
        { 
          id: 'model12',
          name: '斝', 
          class: '斝', // 添加类别
          thumbnail: '/thumbnails/bronze_11.png', 
          modelPath: '/3Dmodels/dou_food_vessel_base_one_of_a_pair_400_bce/scene.gltf',
          description: '斝是一种带有高柄的酒器，通常有两个环耳，主要用于盛酒或在祭祀时温酒。它的特点是高柄、圆腹和两个环状耳，可以用于提拿或悬挂。',
          cameraPosition: { x: 0, y: 5, z: -20 },
          modelScale: { x: 50, y: 50, z: 50 },
          modelPosition: { x: 0, y: 0, z: 0 },
          rotationSpeed: 0.002
        },
      ],
      showModelViewer: false,
      currentModel: null,
      loading: false,
      loadingProgress: 0,
      modelLoaded: false, // 添加，用于标记模型是否加载完成
      loadingTimer: null, // 添加，进度条计时器
      displayCount: 6,
      favorites: [],
      isProcessingFavorites: false,
      userIsLoggedIn: false,
      searchQuery: '',
      showCategories: false,
      currentCategory: '',
      categories: ['展示全部', '尊', '鼎', '瓿', '爵', '斝', '卣', '鐘'],
      renderer: null,
      fromSection: null,
    };
  },
  computed: {
    filteredModels() {
      let result = this.models;
      if (this.searchQuery) {
        result = result.filter((model) =>
          model.name.includes(this.searchQuery)
        );
      }
      if (this.currentCategory) {
        result = result.filter((model) => model.class === this.currentCategory);
      }
      return result;
    },
    displayNewItems() {
      return this.filteredModels.slice(0, this.displayCount);
    },
    hasMoreItems() {
      return this.displayCount < this.filteredModels.length;
    },
  },
  methods: {
    goBack() {
      if (this.fromSection !== null) {
        this.$router.push({ name: 'Home', query: { scrollToSection: this.fromSection } });
      } else {
        this.$router.push({ name: 'Home' });
      }
    },
    showModel(index) {
      this.currentModel = this.displayNewItems[index];
      this.showModelViewer = true;
      this.loading = true;
      this.loadingProgress = 0;
      this.$nextTick(() => {
        this.initThreeJS();
      });
    },
    closeModelViewer() {
      this.showModelViewer = false;
      this.currentModel = null;
      this.loading = false;
      this.loadingProgress = 0;
      this.modelLoaded = false; // 重置模型加载状态
      if (this.loadingTimer) {
        clearInterval(this.loadingTimer); // 清除计时器
        this.loadingTimer = null;
      }
      if (this.renderer) {
        this.renderer.dispose();
        const container = document.getElementById('model-container');
        if (container && container.firstChild) {
          container.removeChild(container.firstChild);
        }
        this.renderer = null;
      }
    },
    initThreeJS() {
      const container = document.getElementById('model-container');
      if (!container) {
        console.error('Model container not found!');
        this.loading = false;
        return;
      }

      // 清空之前的渲染器
      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }

      const width = container.clientWidth;
      const height = container.clientHeight;

      const scene = new THREE.Scene();
      scene.background = new THREE.Color(0x000000);

      const camera = new THREE.PerspectiveCamera(
        75,
        width / height,
        0.1,
        1000
      );
      const { x, y, z } = this.currentModel.cameraPosition;
      camera.position.set(x, y, z);

      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(width, height);
      container.appendChild(renderer.domElement);
      this.renderer = renderer;

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.25;
      controls.screenSpacePanning = false;
      controls.maxPolarAngle = Math.PI / 2;

      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(5, 10, 7.5);
      scene.add(directionalLight);

      this.loading = true;
      this.loadingProgress = 0;
      this.modelLoaded = false; // 重置模型加载状态

      // 启动45秒的进度条计时器，进度达到90%
      const totalLoadingTime = 45 * 1000; // 45秒
      const progressUpdateInterval = 100; // 每100ms更新一次进度
      const maxProgress = 90; // 最大进度为90%
      const totalSteps = totalLoadingTime / progressUpdateInterval;
      let currentStep = 0;

      this.loadingTimer = setInterval(() => {
        if (this.modelLoaded) {
          // 如果模型已加载，进度条跳到100%，清除计时器
          this.loadingProgress = 100;
          clearInterval(this.loadingTimer);
          this.loadingTimer = null;
          this.loading = false;
        } else if (currentStep < totalSteps) {
          currentStep++;
          this.loadingProgress = Math.min(
            maxProgress,
            (currentStep / totalSteps) * maxProgress
          );
        } else {
          // 达到最大进度且模型未加载，停止增加进度
          this.loadingProgress = maxProgress;
        }
      }, progressUpdateInterval);

      const loader = new GLTFLoader();
      loader.load(
        this.currentModel.modelPath,
        (gltf) => {
          const model = gltf.scene;

          // 计算模型的边界框
          const box = new THREE.Box3().setFromObject(model);
          const center = box.getCenter(new THREE.Vector3());

          // 创建一个组来包含模型
          const group = new THREE.Group();
          group.add(model);

          // 将模型移动到组的中心
          model.position.sub(center);

          // 设置组的缩放和位置
          const { x: sx, y: sy, z: sz } = this.currentModel.modelScale;
          group.scale.set(sx, sy, sz);

          const { x: px, y: py, z: pz } = this.currentModel.modelPosition;
          group.position.set(px, py, pz);

          // 将组添加到场景
          scene.add(group);

          const rotationSpeed = this.currentModel.rotationSpeed;

          const animate = () => {
            if (!this.showModelViewer) return; // 停止动画循环
            requestAnimationFrame(animate);
            group.rotation.y += rotationSpeed;
            controls.update();
            renderer.render(scene, camera);
          };
          animate();

          // 模型加载完成
          this.modelLoaded = true;

          if (this.loadingProgress >= 90) {
            // 如果进度条已达到90%，则立即跳到100%并结束加载状态
            this.loadingProgress = 100;
            this.loading = false;
            if (this.loadingTimer) {
              clearInterval(this.loadingTimer);
              this.loadingTimer = null;
            }
          }
        },
        null, // 忽略进度回调
        (error) => {
          console.error('An error happened', error);
          // 加载出错，清除计时器并结束加载状态
          if (this.loadingTimer) {
            clearInterval(this.loadingTimer);
            this.loadingTimer = null;
          }
          this.loading = false;
          alert('模型加载失败，请稍后重试。');
        }
      );

      window.addEventListener('resize', this.onWindowResize);
    },
    onWindowResize() {
      if (!this.renderer || !this.currentModel) return;
      const container = document.getElementById('model-container');
      const width = container.clientWidth;
      const height = container.clientHeight;

      this.renderer.setSize(width, height);
      const camera = this.renderer.camera;
      if (camera) {
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      }
    },
    loadMore() {
      this.displayCount += 6;
    },
    // 检查模型是否已被收藏
    isFavorited(modelId) {
      return this.favorites.includes(modelId);
    },
    // 切换收藏状态
    async toggleFavorite(modelId) {
      if (!this.userIsLoggedIn) {
        alert('请先登录！');
        return;
      }

      this.isProcessingFavorites = true;
      try {
        const userId = localStorage.getItem('userId');
        if (!userId) {
          alert('请先登录！');
          this.isProcessingFavorites = false;
          return;
        }

        if (this.isFavorited(modelId)) {
          // 已收藏，执行取消收藏
          const response = await axios.delete(
            `${BASE_URL}/api/models/${modelId}/favorite`,
            {
              data: { userId },
            }
          );

          if (response.status === 200) {
            this.favorites = this.favorites.filter((id) => id !== modelId);
            alert('已取消收藏');
          }
        } else {
          // 未收藏，执行收藏
          const response = await axios.post(
            `${BASE_URL}/api/models/${modelId}/favorite`,
            { userId }
          );

          if (response.status === 200 || response.status === 201) {
            this.favorites.push(modelId);
            alert('收藏成功！');
          }
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        alert('操作失败，请稍后再试！');
      } finally {
        this.isProcessingFavorites = false;
      }
    },
    // 获取用户的收藏列表
    async fetchFavorites() {
      const userId = localStorage.getItem('userId');
      if (!userId) return;
      try {
        const response = await axios.get(
          `${BASE_URL}/api/users/${userId}/model-favorites`
        );
        this.favorites = response.data.map((fav) => fav.model_id);
      } catch (error) {
        console.error('获取收藏失败:', error);
      }
    },
    // 检查用户是否已登录
    checkLoginStatus() {
      const userId = localStorage.getItem('userId');
      this.userIsLoggedIn = !!userId;
      if (this.userIsLoggedIn) {
        this.fetchFavorites();
      }
    },
    // 显示或隐藏类别列表
    toggleCategories() {
      this.showCategories = !this.showCategories;
    },
    // 关闭类别列表
    closeCategories() {
      this.showCategories = false;
    },
    // 根据类别过滤
    filterByCategory(category) {
      if (category === '展示全部') {
        this.currentCategory = '';
      } else {
        this.currentCategory = category;
      }
      this.displayCount = 6; // 重置显示数量
      this.closeCategories();
    },
  },
  mounted() {
    this.checkLoginStatus();
    // 点击页面其他地方时关闭类别列表
    document.addEventListener('click', this.closeCategories);
    this.fromSection = this.$route.query.fromSection;
  },
  beforeDestroy() {
    // 如果使用 Vue 3，请改为 beforeUnmount
    document.removeEventListener('click', this.closeCategories);
    window.removeEventListener('resize', this.onWindowResize);
    if (this.loadingTimer) {
      clearInterval(this.loadingTimer); // 清除计时器
      this.loadingTimer = null;
    }
    if (this.renderer) {
      this.renderer.dispose();
    }
  },
};
</script>

<style scoped>
/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* 整体背景色 */
.bronze-restoration {
  
  padding: 20px;
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
  color: #fdf6e3; /* 淡色字体 */
  background-image: url('@/assets/s2.jpg'); 
  background-repeat: no-repeat; /* 背景图不重复 */
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定 */
}

/* 头部样式 */
.header-container {
  margin-top: 52px;
  background-color: #3e2a1f; /* 深棕色 */
  border-radius: 20px;
  padding: 10px 20px;
  margin-bottom: 20px;
  width: 50%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.header {
  display: flex;
  align-items: center;
  justify-content: center; /* 居中对齐标题 */
  position: relative; /* 为绝对定位的返回按钮提供参考 */
}

.back-button {
  position: absolute; /* 绝对定位返回按钮 */
  left: 10px; /* 距离左侧10px */
  background-color: #5e4b3c; /* 暗棕色 */
  color: #fdf6e3; /* 淡色字体 */
  border: none;
  padding: 8px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s, transform 0.3s;
}

.back-button:hover {
  background-color: #8b4513; /* 更深的棕色 */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.header h1 {
  font-size: 24px;
  margin: 0;
  color: #fdf6e3;
  text-align: center; /* 确保文本居中 */
  font-family: 'Playfair Display', serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* 搜索和筛选栏 */
.search-filter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap; /* 允许换行以适应不同屏幕大小 */
}

.search-input {
  width: 40%;
  min-width: 200px; /* 设置最小宽度防止过窄 */
  padding: 10px 15px;
  font-size: 16px;
  border: 2px solid #d4af37; /* 金色边框 */
  border-radius: 25px;
  background-color: #2e2e2e; /* 深灰背景 */
  color: #fdf6e3; /* 淡色字体 */
  outline: none;
  transition: border-color 0.3s;
}

.search-input::placeholder {
  color: #d4af37; /* 金色占位符 */
}

.search-input:focus {
  border-color: #b89c34; /* 更深的金色 */
}

.filter-container {
  position: relative;
  margin-left: 20px;
}

.filter-button {
  background-color: #d4af37; /* 金色 */
  color: #2e2e2e; /* 深色字体 */
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  white-space: nowrap; /* 防止文本换行 */
  transition: background-color 0.3s, transform 0.3s;
}

.filter-button:hover {
  background-color: #b89c34; /* 更深的金色 */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.category-list {
  position: absolute;
  top: 110%;
  left: 0;
  background-color: #3e2a1f; /* 深棕色背景 */
  border: 2px solid #d4af37; /* 金色边框 */
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  margin-top: 5px;
  display: flex; /* 使用flex布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 设置按钮间距 */
  max-width: 300px; /* 设置最大宽度 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-in-out;
}

.category-item {
  flex: 1 1 100px; /* 每个按钮至少100px宽度 */
  padding: 8px 12px;
  background: none;
  border: 2px solid #d4af37; /* 金色边框 */
  border-radius: 20px;
  cursor: pointer;
  color: #fdf6e3; /* 淡色字体 */
  text-align: center;
  box-sizing: border-box;
  font-size: 14px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.category-item.active,
.category-item:hover {
  background-color: #d4af37; /* 金色背景 */
  color: #2e2e2e; /* 深色字体 */
  transform: scale(1.05);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行固定3个模型 */
  gap: 20px;
}


.model-item {
  width: 100%;
}

.model-box {
  background-color: #2e2e2e; /* 深灰背景 */
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  position: relative; /* 为收藏按钮定位 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.model-thumbnail {
  position: relative;
}

.model-box img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.model-box img:hover {
  transform: scale(1.03);
}

.model-box p {
  margin-top: 10px;
  cursor: pointer;
  font-weight: bold;
  color: #d4af37; /* 金色 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s;
}

.model-box p:hover {
  color: #b89c34; /* 更深的金色 */
}

/* 收藏按钮样式 */
.favorite-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
  color: #d4af37; /* 金色 */
  transition: color 0.3s, transform 0.3s;
}

.favorite-button.favorited {
  color: #b89c34; /* 更深的金色 */
}

.favorite-button:hover:not(:disabled) {
  transform: scale(1.2);
  color: #b89c34;
}

.favorite-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.favorite-button:disabled {
  cursor: not-allowed;
  color: #999;
}

/* 加载更多按钮 */
.load-more-btn {
  margin-top: 15px;
  display: block;
  width: 200px;
  padding: 10px;
  background-color: #d4af37; /* 金色 */
  color: #2e2e2e; /* 深色字体 */
  border: none;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.load-more-btn:hover {
  background-color: #b89c34; /* 更深的金色 */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}

/* 模型查看器 */
.model-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 40, 39, 0.9); /* 深绿色半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.model-viewer {
  background-color: #2e2e2e; /* 深灰色 */
  width: 80%;
  height: 80%;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: slideUp 0.5s ease-out;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

@keyframes slideUp {
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

.model-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #5e4b3c; /* 深棕色 */
}

.model-viewer-header h2 {
  color: #fdf6e3;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.close-button {
  background-color: #d4af37; /* 金色 */
  color: #2e2e2e; /* 深色图标 */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.close-button:hover {
  background-color: #b89c34; /* 更深的金色 */
  transform: rotate(90deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#model-container {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  background-color: #1c2827; /* 深绿色背景 */
}

.loading-bar {
  width: 100%;
  height: 5px;
  background-color: #5e4b3c; /* 深棕色背景 */
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #d4af37; /* 金色进度条 */
  width: 0%;
  transition: width 0.1s linear; /* 更平滑的过渡 */
}

.model-description {
  color: #fdf6e3;
  padding: 20px;
  text-align: center;
  background-color: #3e2a1f; /* 深棕色背景 */
  font-family: 'Playfair Display', serif;
  font-size: 16px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式调整（可选） */
@media (max-width: 1024px) {
  .model-grid {
    grid-template-columns: repeat(2, 1fr); /* 屏幕宽度小于1024px时，每行2个模型 */
  }
}

@media (max-width: 600px) {
  .model-grid {
    grid-template-columns: 1fr; /* 屏幕宽度小于600px时，每行1个模型 */
  }
}
</style>